{% extends 'base.html' %}

{% block title %}商品列表{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h1>商品列表</h1>
    <a href="{% url 'goods:add' %}" class="btn btn-primary">添加新商品</a>
</div>

<div class="row">
    {% for goods in page_obj %}
    <div class="col-md-3 mb-4">
        <div class="card h-100">
            <img src="{{ goods.cover_image.url }}" class="card-img-top" alt="{{ goods.name }}" style="height: 200px; object-fit: cover;">
            <div class="card-body">
                <h5 class="card-title">{{ goods.name }}</h5>
                <p class="card-text text-primary fs-5">¥{{ goods.price }}</p>
                <p class="card-text text-truncate">{{ goods.description|truncatechars:50 }}</p>
                <div class="mt-3">
                    {% for category in goods.categories.all %}
                    <span class="badge bg-secondary">{{ category.name }}</span>
                    {% endfor %}
                </div>
            </div>
            <div class="card-footer">
                <a href="{% url 'goods:detail' goods.id %}" class="btn btn-sm btn-outline-primary w-100">查看详情</a>
            </div>
        </div>
    </div>
    {% empty %}
    <div class="col-12">
        <div class="alert alert-info">暂无商品数据</div>
    </div>
    {% endfor %}
</div>

<!-- 分页控件 -->
{% if page_obj.paginator.num_pages > 1 %}
<nav class="mt-4">
    <ul class="pagination justify-content-center">
        {% if page_obj.has_previous %}
        <li class="page-item">
            <a class="page-link" href="?page=1">首页</a>
        </li>
        <li class="page-item">
            <a class="page-link" href="?page={{ page_obj.previous_page_number }}">上一页</a>
        </li>
        {% endif %}

        <li class="page-item active">
            <span class="page-link">第 {{ page_obj.number }} 页，共 {{ page_obj.paginator.num_pages }} 页</span>
        </li>

        {% if page_obj.has_next %}
        <li class="page-item">
            <a class="page-link" href="?page={{ page_obj.next_page_number }}">下一页</a>
        </li>
        <li class="page-item">
            <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}">末页</a>
        </li>
        {% endif %}
    </ul>
</nav>
{% endif %}
{% endblock %}